<script setup lang="ts">
import { getStagePhoto } from "@/api/zhang";
import { useRoute, useRouter } from "vue-router";
import { ref, computed } from "vue";
import { showImagePreview } from "vant";

// 预览图片

const loading = ref(false);
const previewImages = (index) => {
  const images = photo.value.map((item) => item.olink);
  showImagePreview({
    images,
    startPosition: index,
  });
};

const route = useRoute();
const router = useRouter();

const photo = ref([]);
getStagePhoto(route.query.movieId, route.query.photosnm).then((res) => {
  photo.value = res.data.photos;
  loading.value = true;
});

// 定义显示/隐藏小框的状态
const showPopup = ref(false);

// 切换小框显示状态
const togglePopup = () => {
  showPopup.value = !showPopup.value;
};

// 定义返回首页的函数
const fanhui = () => {
  router.push({
    path: "/",
  });
};

// 动态计算 photo 容器的高度
const photoContainerStyle = computed(() => {
  return photo.value.length > 32 ? {} : { height: "100vh" };
});
</script>

<template>
  <div v-if="loading" class="photo" :style="photoContainerStyle">
    <div class="a">
      <van-nav-bar title="剧照" left-arrow @click-left="router.back()" />
      <van-icon name="wap-nav" @click="togglePopup" />
    </div>
    <div @click="fanhui" v-if="showPopup" class="popup">
      <p>首页</p>
    </div>
    <div class="photo-all">
      <div class="photoa" v-for="(item, index) in photo" :key="index">
        <van-image
          width="86rem"
          height="86rem"
          fit="cover"
          :src="item.olink"
          @click="previewImages(index)"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
/* 定义小框样式 */
.popup {
  position: absolute;
  top: 40rem;
  right: 35rem;
  width: 100rem;
  height: 40rem;
  line-height: 40rem;
  background-color: #ffffff;
  color: #000;
  text-align: center;
  line-height: 20rem;
  border: 1rem solid #ddd;
  border-radius: 4rem;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.1);
  font-size: 12rem;
  z-index: 1000;
  p {
    line-height: 40rem;
  }
}
.photo {
  background-color: #333333;
  .photo-all {
    display: flex;
    flex-wrap: wrap;
    .van-image {
      margin: 0 3rem 3rem 3rem;
    }
  }
}
:deep(.van-icon-wap-nav) {
  position: absolute;
  font-size: 25rem !important;
  right: 8rem;
  top: 9.5rem;
  z-index: 1;
}
:deep(.van-badge__wrapper) {
  color: #fff;
  font-size: 20rem;
}
:deep(.van-nav-bar__title) {
  color: #fff;
}
:deep(.van-nav-bar__content) {
  background-color: #e54847;
}
p {
  margin: 0;
}
</style>
